<template>
  <div style="padding: 0 2px">
    <a-input-number :step="step" :size="size"
      style="width: 116px" :min="min" :max="max"
      @change="startBlur" v-model="startText"
      :placeholder="innerPlaceholder"/>
    -
    <a-input-number :step="step" :size="size"
      style="width: 116px" :min="min" :max="max"
      @change="endBlur" v-model="endText"
      :placeholder="innerPlaceholder"/>
  </div>
</template>
<script>
import {createProps} from '@/utils';

export default {
  name: 'NumberSearch',
  props: {
    auth: createProps(String, 'edit'),
    placeholder: createProps(String),
    fieldConfig: createProps(Object),
    size: createProps(String),
    value: createProps(Array)
  },
  data() {
    return {
      startText: null,
      endText: null
    }
  },
  methods: {
    startBlur(val) {
      this.change()
    },
    endBlur(val) {
      this.change()
    },
    change() {
      this.$emit('update:value', [this.startText, this.endText])
      this.$emit('update:title', [this.startText, this.endText])
    },
  },
  computed: {
    innerPlaceholder() {
      return (this.fieldConfig && this.fieldConfig.placeholder) || this.placeholder
    },
    min() {
      try {
        return parseFloat(this.fieldConfig.minValue);
      } catch (e) {
      }
      return Infinity;
    },
    max() {
      try {
        return parseFloat(this.fieldConfig.maxValue);
      } catch (e) {
      }
      return Infinity;
    },
    step() {
      try {
        let i = this.fieldConfig.length, res = 1;
        if (i > 5) i = 5;
        if (i < 0) i = 0;
        while (i--) res /= 10;
        return res;
      } catch (e) {
      }
      return 0;
    }
  }
};
</script>